<template>
  <div class="chat_room">
    <comhead></comhead>
    <div class="chatList">
      <ul>
        <li :class="{'active': chatIndex === i}" class="chats" v-for="(v, i) in chatRoom" @click="chechChat(i)" :key="i">{{v}}</li>
      </ul>
      <div class="room">
        <div class="msg" ref="msg" v-if="chatIndex === 0">
          <div class="list" v-for="(v, i) in arr" v-show="!v.to" :key="i">
            <div>
              <span>{{v.account}}</span><br>
              <img :src="v.img" alt="" @click="chatTo(v.account)">
            </div>
            <p :class="{'me': v.account === userInfo.account}">{{v.txt}}</p>
          </div>
        </div>
        <div class="msg" v-else ref="msg" v-for="(v, i) in chatRoom" v-show="chatIndex === i"  :key="i">
          <div class="list" v-for="(v, i) in arr" v-show="(v.to === chatRoom[chatIndex] && v.from === userInfo.account) || (v.to === userInfo.account && v.from === chatRoom[chatIndex])" :key="i">
            <div>
              <span>{{v.account}}</span><br>
              <img :src="v.img" alt="" @click="chatTo(v.account)">
            </div>
            <p :class="{'me': v.account === userInfo.account}">{{v.txt}}</p>
          </div>
        </div>
        <div class="input">
          <div class="emoji" v-show="emojiVisible">
            <span @click="check(v)" v-for="(v, i) in emoji" :key="i">{{v}}</span>
          </div>
          <span @click="showEmoji">{{'\u{1F60F}'}}</span>
          <el-input @focus="emojiVisible = false" v-model="txt"></el-input>
          <el-button type="primary" @click="send">发送</el-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import comhead from '@/components/header'
import { mapGetters } from 'vuex'
import {emoji} from '@/utils/tools'
export default {
  data () {
    return {
      emojiVisible: false,
      emoji,
      txt: '',
      arr: [],
      ws: '',
      scroll: 0,
      chatRoom: ['聊天室'],
      chatIndex: 0
    }
  },
  components: {
    comhead
  },
  computed: {
    ...mapGetters(['userInfo'])
  },
  mounted () {
    let that = this
    this.ws = new WebSocket('ws://134.175.145.32:8088')
    // this.ws = new WebSocket('ws://172.16.110.166:8088')
    console.log(this.ws)
    this.ws.addEventListener('open', function () {
      that.ws.send(that.txt)
    })
    this.ws.onmessage = (msg) => {
      that.scroll += 100
      let res = JSON.parse(msg.data)
      // console.log(res)
      if (res.to === that.userInfo.account) {
        if (that.chatRoom.findIndex(v => {
          return v === res.from
        }) === -1) {
          that.chatRoom.push(res.from)
        }
      }
      that.arr.push(res)
      that.$nextTick(() => {
        const nodeList = document.querySelectorAll('.msg')
        nodeList.forEach(v => {
          v.scrollTo(0, that.scroll)
        })
      })
    }
  },
  methods: {
    showEmoji () {
      this.emojiVisible = !this.emojiVisible
    },
    check (v) {
      this.txt += v
    },
    send () {
      if (!this.txt) return
      if (this.chatIndex === 0) {
        let item = {
          account: this.userInfo.account,
          img: this.userInfo.img,
          txt: this.txt
        }
        this.ws.send(JSON.stringify(item))
        this.txt = ''
      } else {
        let item = {
          account: this.userInfo.account,
          img: this.userInfo.img,
          txt: this.txt,
          from: this.userInfo.account,
          to: this.chatRoom[this.chatIndex]
        }
        this.ws.send(JSON.stringify(item))
        this.txt = ''
      }
      this.emojiVisible = false
    },
    chechChat (i) {
      this.chatIndex = i
    },
    chatTo (v) {
      if (v === this.userInfo.account) return
      if (this.chatRoom.some(val => { return val === v })) return
      this.chatRoom.push(v)
    }
  }
}
</script>
<style lang="less" scoped>
.chat_room{
  .chatList{
    position: absolute;
    width: 600px;
    height: 400px;
    top: 60px;
    left: 50%;
    transform: translate(-50%);
    border: 1px solid rgb(255, 72, 0);
    border-radius: 5px;
    display: flex;
    overflow: hidden;
    ul{
      display: flex;
      flex-direction: column;
      width: 100px;
      background: rgb(255, 230, 220);
      li{
        background: rgb(255, 209, 191);
        text-align: center;
        line-height: 40px;
        color: #fff;
        cursor: pointer;
        &.active{
          background: rgb(253, 145, 102);
        }
      }
    }
  }
  .room{
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 1px;
    .msg{
      overflow-y: auto;
      flex: 1;
      &::-webkit-scrollbar {/*滚动条整体样式*/
        width: 10px;     /*高宽分别对应横竖滚动条的尺寸*/
        height: 1px;
      }
      &::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
        border-radius: 10px;
        background-color: #FF4800;
        background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
      }
      &::-webkit-scrollbar-track {/*滚动条里面轨道*/
        -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
        /*border-radius: 10px;*/
        background: #EDEDED;
      }
      .list{
        display: flex;
        padding: 10px 20px;
        // align-items: center;
        >div{
          width: 40px;
          order: 1;
          span{
            display: inline-block;
            width: 100%;
            text-align: center;
            color: #FF4800;
          }
          img{
            width: 40px;
            height: 40px;
            border-radius: 50%;
            cursor: pointer;
          }
        }
        p{
          order: 2;
          color: #fff;
          border: 1px solid rgb(248, 126, 78);
          background: rgb(252, 174, 143);
          border-radius: 6px;
          flex: 1;
          word-break: break-all;
          margin-left: 16px;
          margin-top: 20px;
          padding: 4px;
          position: relative;
          &.me{
            order: 0;
            margin-right: 16px;
            margin-left: 0;
            &::after{
              transform: rotate(135deg);
              left: auto;
              right: -7px;
            }
          }
          &::after{
            content: '';
            position: absolute;
            transform: rotate(-45deg);
            top: 7px;
            left: -7px;
            border: 6px solid rgb(248, 126, 78);
            border-right-color: transparent;
            border-bottom-color: transparent;
          }
        }
      }
    }
    .input{
      height: 40px;
      display: flex;
      position: relative;
      align-items: center;
      span{
        user-select: none;
      }
      >span{
        font-size: 30px;
        cursor: pointer;
      }
      .emoji{
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        position: absolute;
        bottom: 42px;
        padding: 6px;
        background: #fff;
        span{
          font-size: 20px;
          padding: 3px;
          cursor: pointer;
        }
      }
    }
  }
  @keyframes trans {
    0%{
      border-color: rgb(255, 72, 0);
    }
    20%{
      border-color: rgb(255, 187, 0);
    }
    40%{
      border-color: rgb(0, 255, 64);
    }
    60%{
      border-color: rgb(0, 132, 255);
    }
    80%{
      border-color: rgb(247, 0, 255);
    }
    100%{
      border-color: rgb(255, 72, 0);
    }
  }
}
</style>
